<template>
<div>
     <!-- 面包屑导航区 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>分类参数</el-breadcrumb-item>
</el-breadcrumb>
<el-card>
  <el-alert
    title="注意：只允许为第三级分类设置相关参数！"
    type="warning" :closable="false" show-icon>
  </el-alert> 
  <!-- 选择商品分类区 -->
  <el-row class="cat_opt">
    <el-col>
      <span>选择商品分类：</span>
      <!-- 选择商品分类的级联选择框 -->
      <el-cascader
    v-model="selectedCateKeys"
    :options="catelist"
    :props="cateProps"
    @change="handleChange"></el-cascader>
    </el-col>
  </el-row>
  <!-- tab页签区域 -->
  <el-tabs v-model="activeName" @tab-click="handleTabClick">
    <el-tab-pane label="动态参数" name="many">
      <el-button type="primary" size="small" :disabled="isBtnDisable" @click="addDialogShow">添加参数</el-button>
      <!-- 动态参数表格 -->
      <el-table :data="manyTableData" border stripe>
        <!-- 展开行 -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-tag v-for="(item,i) in scope.row.attr_vals" :key="i" closable @close="closeTag(i,scope.row)">
              {{item}}
            </el-tag>
            <el-input
            class="input-new-tag"
            v-if="scope.row.inputVisible"
            v-model="scope.row.inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm(scope.row)"
            @blur="handleInputConfirm(scope.row)">
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" width="80px" align="center"></el-table-column>
        <el-table-column label="参数名称" prop="attr_name" align="center" ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini"  @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handeleDelete(scope.row.attr_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="静态属性" name="only">
      <el-button type="primary" size="small" :disabled="isBtnDisable" @click="addDialogShow">添加属性</el-button>
      <el-table :data="onlyTableData" border stripe>
        <!-- 展开行 -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-tag v-for="(item,i) in scope.row.attr_vals" :key="i" closable @close="closeTag(i,scope.row)">
              {{item}}
            </el-tag>
            <el-input
            class="input-new-tag"
            v-if="scope.row.inputVisible"
            v-model="scope.row.inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm(scope.row)"
            @blur="handleInputConfirm(scope.row)">
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" width="80px" align="center"></el-table-column>
        <el-table-column label="属性名称" prop="attr_name" v-model="addForm.attr_name" align="center" ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handeleDelete(scope.row.attr_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
</el-card>
<el-dialog
  :title="title+titleText"
  :visible.sync="addDialogVisible"
  width="30%"
  @close="addDialogClosed"
  >
  <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
  <el-form-item :label="titleText" prop="attr_name">
    <el-input v-model="addForm.attr_name"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="closeDialog">取 消</el-button>
    <el-button type="primary" @click="title==='添加'?addParams():editParams(addForm.attr_id)">确 定</el-button>
  </span>
</el-dialog>
</div>
</template>

<script>
export default {
    data(){
        return {
          catelist:[],
          // 级联选择框配置对象
          cateProps:{
            expandTrigger: 'hover',
            value:'cat_id',
            label:'cat_name',
            children:'children'
          },
          //级联选择框双向绑定到的数组
          selectedCateKeys:[],
          // 被激活的页签名称
          activeName:"many",
          manyTableData:[],
          onlyTableData:[],
          addDialogVisible:false,
          addForm:{
            attr_name:''
          },
          // 添加参数的表单数据
          addFormRules:{
            attr_name:[ { required: true, message: '请输入参数名称', trigger: 'blur' }]
          },
          title:'',
        }
    },
    created(){
      this.getCateList()
    },
    methods:{
        // 获取商品分类数据
        async getCateList(){
          const {data:res} = await this.$http.get('categories')
          if(res.meta.status!==200) return this.$message.error('获取商品分类失败')
          this.catelist=res.data
        },
        //级联选择框选中项变化会触发这个函数
        handleChange(){
        this.getParamData()  
         
        },
        // tab页签点击事件处理函数
        handleTabClick(){
          this.getParamData() 
        },
        async getParamData(){
          if(this.selectedCateKeys.length!==3) {
            this.selectedCateKeys=[]
            return
          }
          //选中三级分类
          //根据所选分类的id，和当前所处面板获取对应的参数
         const {data:res}= await this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel:this.activeName}})
         if(res.meta.status!==200) return this.$message.error('获取参数列表失败')
         console.log('paramData',res.data);
         res.data.forEach(item=>{
          item.attr_vals=item.attr_vals? item.attr_vals.split(' '):[]
          //控制标签文本框的显示与隐藏
          item.inputVisible=false
          //标签文本框中输入的值
          item.inputValue=''
         })
         console.log('res',res.data);
         if(this.activeName==='many') {
          this.manyTableData=res.data
         }else{
          this.onlyTableData=res.data
         }
        },
        // 监听对话框的关闭事件
        addDialogClosed(){
          this.$refs.addFormRef.resetFields()
          this.addForm={}
        },
        // 点击确定按钮添加参数
        addParams(){
          this.$refs.addFormRef.validate(async valid=>{
            console.log('valid',valid);
            if(!valid) return
            //发起添加分类请求
         const{data:res}=  await this.$http.post(`categories/${this.cateId}/attributes`,{
          attr_name:this.addForm.attr_name,
          attr_sel:this.activeName
         })
         if(res.meta.status!==201)
         return this.$message.error('添加参数失败')
         this.$message.success('添加参数成功')
         //隐藏添加分类的对话框
         this.addDialogVisible=false
         this.getParamData()
        })
        },
        addDialogShow(){
          this.title='添加'
          this.addDialogVisible=true
        },
        // 点击编辑按钮展示对会话框
        showEditDialog(row){
          this.title='编辑'
          this.addDialogVisible=true
          console.log('row',row);
          this.addForm=row
        },
        editParams(id){
          this.$refs.addFormRef.validate(async valid=>{
            console.log('valid',valid);
            if(!valid) return
            //发起添加分类请求
         const{data:res}=  await this.$http.put(`categories/${this.cateId}/attributes/${id}`,{
          attr_name:this.addForm.attr_name,
          attr_sel:this.activeName
         })
         if(res.meta.status!==200)
         return this.$message.error('修改参数失败')
         this.$message.success('修改参数成功')
         //隐藏添加分类的对话框
         this.addDialogVisible=false
         this.getParamData()
        })
        },
        closeDialog(){
          this.addDialogVisible = false;
          this.addForm={}
        },
       async handeleDelete(id){
          const confirmResult= await this.$confirm('此操作将永久删除该参数, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        if(confirmResult!=='confirm') return this.$message.info('取消删除')
         const{data:res}= await this.$http.delete(`categories/${this.cateId}/attributes/${id}`)
         if(res.meta.status!==200) return this.$message.error('删除失败')
        this.$message.success("删除成功")
        this.getParamData()
        },
        async handleInputConfirm(row){
          if(row.inputValue.trim().length===0){
            row.inputValue=''
            row.inputVisible=false
            return
          }
          // 如果没有return 则证明输入了内容，需要做后续处理
          row.attr_vals.push(row.inputValue.trim())
          row.inputValue=''
          row.inputVisible=false
          //需要发起请求，保存这次参数
          this.saveAttrVals(row)
        },
        showInput(row){
          row.inputVisible=true
          // 让文本框自动获得焦点
          // $nextTick 方法的作用，就是当页面元素被重新渲染之后，
          // 才会执行回调函数中的代码。
          this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
        },
        // 删除对应参数可选标签
        closeTag(i,row){
          console.log(1111);
          row.attr_vals.splice(i,1)
          this.saveAttrVals(row)
        },
        // 对attr_vals保存数据库中
        async saveAttrVals(row){
          const{data:res}= await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`,{
            attr_name:row.attr_name,
            attr_sel:row.attr_sel,
            attr_vals:row.attr_vals.join(' ')
          })
          if(res.meta.status!==200) return this.$message.error('修改参数项失败')
          this.$message.success('修改参数项成功')
        }
    },
    computed:{
      isBtnDisable(){
        // 如果按钮需要被禁用，则返回true，否则返回false
        if(this.selectedCateKeys.length!==3){
          return true;
        }
        return false
      },
      // 当前选中的三级分类id
      cateId(){
        if(this.selectedCateKeys.length===3){
          return this.selectedCateKeys[2]
        }
        return null
      },
      titleText(){
        if(this.activeName==='many')
       { return '动态参数'
      }else{
        return '静态属性'
      }

      }
    }
}
</script>

<style lang="less" scoped>
.cat_opt{
  margin: 15px 0;
  
}
.el-tag{
  margin: 10px;
}
.input-new-tag{
  width: 200px;
}
</style>